<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-08-29 16:12:01
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-07-03 11:19:59
 * @FilePath: \zjgxpt\mainPro\src\layout\menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <fragment>
    <fragment v-for="(item, index) in treeData" :key="index">
      <!-- 思路: 有子元素使用el-submenu 没有子元素使用el-menu-item -->

      <el-submenu
        style=""
        :index="item.path || item.title"
        v-if="item.children && item.children.length > 0"
      >
        <template #title >
          <div :style="{'marginLeft':item.left+'px'}" style="display:flex">
            <i :class="item.img"></i>
          <span> {{ item.title }}</span>
          </div>
          
        </template>
        <menu-tree :menuData="item.children"></menu-tree>
      </el-submenu>
      <fragment v-else >
        <div v-if="item.path2" class="menuItem">
          <el-menu-item :index="item.path" :style="{'marginLeft':item.left+'px'}">
          {{ item.title }}
        </el-menu-item>
     
        <el-menu-item
          v-if="item.path2"
          :index="item.path2"
          class="el-icon-edit"
        >
        </el-menu-item></div>
        <el-menu-item v-else :index="item.path" :style="{'marginLeft':item.left+'px'}">
          {{ item.title }}
        </el-menu-item>
        
      </fragment>
    </fragment>
  </fragment>
</template>

<script>
import menuTree from "@/components/commonPublic/menu.vue";

export default {
  props: ["menuData"],
  name: "menuTree",
  // props: {
  //   menuData: {
  //     type: Array,
  //     default: () => [], // es6的箭头函数
  //   },
  // },
  data() {
    return {
      treeData: [],
    };
  },
  watch: {
    menuData: {
      handler(newVal) {
        if (newVal) {
          var that = this;
          setTimeout(() => {
            that.treeData = newVal;
          }, 200);
        }
      },
      immediate: true,
    },
  },
  components: {
    menuTree,
    // PositionTitle,
    // Mechanisma,
  },
};
</script>

<style lang="less" scoped>
/deep/.el-menu-item:hover,
/deep/.el-sub-menu__title:hover {
  // background: #000C17!important;
}
.el-main {
  padding: 0 !important;
}


/deep/.el-menu {
  border: none !important;
  background: transparent !important;
}
.menuItem {
  display: flex;
  padding-right: 15px;
  justify-content: space-between;
}
</style>
